<template>
  <div class="y-big-conter">
    <!-- 最外层容器 -->
    <div class="y-conter">
      <!-- 标题nav容器 -->
      <div class="y-nav">
        <span class="y-title">档案包列表</span>
        <span class="y-tb"
          ><a-icon type="plus" @click="dialogFormVisible = true"
        /></span>
        <!-- 点击新建加号得对话框 -->
        <el-dialog title="新建档案包" :visible.sync="dialogFormVisible">
          <el-form ref="ruleForm" :rules="rules" :model="ruleForm">
            <el-row>
              <el-col :span="8" class="y-left-inp">
                <el-form-item label="名称：" prop="file_type_name">
                  <el-input
                    class="y-inp"
                    v-model="ruleForm.file_type_name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="y-right-inp">
                <el-form-item label="排序：" prop="file_type_sort">
                  <a-input-number
                    class="sort"
                    v-model="ruleForm.file_type_sort"
                    :min="1"
                    :max="100"
                    @change="onChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="SearchSure('ruleForm')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <!-- 树形控件容器 -->
      <div class="cebian">
        <el-tree
          :data="a"
          :props="defaultProps"
          default-expand-all
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node }">
            <span>{{ node.label }}</span>
            <span>
              <!-- 下拉菜单 -->
              <el-dropdown
                trigger="click"
                :visible-change="false"
                :hide-on-click="false"
              >
                <el-button type="text" size="mini">
                  <a-icon type="more" />
                </el-button>
                <el-dropdown-menu
                  slot="dropdown"
                  placement="top-end"
                  @click="handleClick"
                >
                  <el-row>
                    <el-dropdown-item
                      icon="el-icon-plus"
                      @click.native="submitfile()"
                      v-if="node.level == '1'"
                      >添加文件</el-dropdown-item
                    >

                    <!-- 点击添加文件得对话框 -->
                    <el-dialog
                      title="新建文件夹"
                      :visible.sync="dialogVisible"
                      :modal-append-to-body="false"
                    >
                      <el-form ref="form" :rules="rules" :model="form">
                        <el-row>
                          <el-col :span="8" class="y-left-inp">
                            <el-form-item label="名称：" prop="file_type_name">
                              <el-input
                                v-model="form.file_type_name"
                              ></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8" class="y-right-inp">
                            <el-form-item label="排序：" prop="file_type_sort">
                              <a-input-number
                                class="sort"
                                v-model="form.file_type_sort"
                                :min="1"
                                :max="100"
                                @change="onChange"
                              />
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false"
                          >取 消</el-button
                        >
                        <el-button type="primary" @click="confirm('form')"
                          >确 定</el-button
                        >
                      </div>
                    </el-dialog>
                    <el-col>
                      <el-dropdown-item
                        icon="el-icon-circle-plus"
                        @click.native="submit()"
                        >编辑文档</el-dropdown-item
                      >
                      <el-dialog
                        title="编辑档案包"
                        :visible.sync="outerVisible"
                        :modal-append-to-body="false"
                      >
                        <el-form ref="conform" :rules="rules" :model="conform">
                          <el-row>
                            <el-col :span="8" class="y-left-inp">
                              <el-form-item
                                label="名称："
                                prop="file_type_name"
                              >
                                <el-input
                                  v-model="conform.file_type_name"
                                ></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8" class="y-right-inp">
                              <el-form-item
                                label="排序："
                                prop="file_type_sort"
                              >
                                <a-input-number
                                  class="sort"
                                  v-model="conform.file_type_sort"
                                  :min="1"
                                  :max="100"
                                  @change="onChange"
                                />
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                        <div slot="footer">
                          <el-button @click="outerVisible = false"
                            >取 消</el-button
                          >
                          <el-button
                            type="primary"
                            @click="Editbutton('conform')"
                            >确 定</el-button
                          >
                        </div>
                      </el-dialog>
                    </el-col>
                    <el-col>
                      <el-dropdown-item
                        @click.native="del()"
                        icon="el-icon-circle-plus-outline"
                        >删除文档</el-dropdown-item
                      >
                    </el-col>
                  </el-row>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <!-- 右侧表格 -->
    <div class="y-table">
      <!-- 输入框 -->
      <div class="y-form">
        <el-form
          :inline="true"
          ref="ruleForm"
          :model="ruleForm"
          class="demo-form-inline"
        >
          <!-- 输入框部分 -->
          <el-form-item label="设备编号：">
            <el-input
              v-model="ruleForm.equipment_code"
              placeholder="设备编号"
            ></el-input>
            <!-- 按钮搜索重置部分 -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search('ruleForm')"
              >搜索</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="y-table-style">
        <el-table
          :border="true"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          ref="multipleTable"
          :data="currList"
          highlight-current-row
          tooltip-effect="dark"
          style="width: 98%, text-align: center "
        
        >
          <!-- 序号 -->
          <el-table-column
            align="center"
            type="index"
            width="100"
            :index="indexFn"
            label="序号"
          ></el-table-column>
          <el-table-column
            label="文件名称"
            prop="equipment_code"
            width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            label="上传者"
            prop="equipment_name"
            width="160"
            hight="30px"
            align="center"
          ></el-table-column>
          <el-table-column
            label="大小"
            prop="equipment_addr"
            width="160"
            align="center"
          ></el-table-column>
           <el-table-column
            label="上传日期"
            prop="equipment_addr"
            width="160"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
    
      // ====树形控件======
      a: [], //外层存放数据
      roleData: [], //总数居
      defaultProps: {
        children: "children",
        label: "file_type_name",
      },
      //=====对话框=======
      dialogFormVisible: false, //加号
      dialogVisible: false, //添加
      outerVisible: false, //编辑
      // =====加号对话框输入框=====
      ruleForm: {
        file_type_sort: "",
        file_type_name: "",
        file_type_fid: "0",
      },
      // =====添加===
      form: {
        file_type_sort: "",
        file_type_name: "",
        file_type_fid: "",
      },
      // ======编辑=====
      conform: {},
      // ======删除======
        str: {},//删除时传给后台

      formLabelWidth: "120px",
      //验证
      rules: {},

      // ======右侧输入框=======
    
      ruleForm: {
        equipment_code: "", //设备编号
      },
      // ======表格======
        currList: [], //当前展示的数据数组
    };
  },
  methods: {
    // ====下拉菜单添加======
    submitfile() {//点击选项触发事件
      this.dialogVisible = true;
      console.log("111");
    },
    // ====下拉菜单编辑======
    submit() {
      this.outerVisible = true;
      console.log("222", this.arr);
    },

    //树形控件的点击事件获取外层的数据
    //点击父级工程资料时把id赋值给后台
    handleNodeClick(data) {
      console.log(data);
      this.arr = data;
      console.log("只是", this.arr);
      this.form.file_type_fid = data.file_type_id;
    },
    // =======弹框输入框排序====
    onChange(value) {
      console.log("changed", value);
    },
    handleClick() {
      alert("button click");
    },
    //======================加号弹框添加选项 确定按钮=======================
    SearchSure(formName) {
      let a = [];
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //输入框发送后台
          this.dialogFormVisible = false;
          http.newconstruction(this.ruleForm).then((r) => {
            console.log("这是新建的", r);
            //提交后提示
            alert(r.msg);
            //重新加载数据
            this.roleData = [];
            this.a = [];
            http.project(this.ruleForm).then((r) => {
              console.log(r.data);
              this.roleData = r.data;
              let rootChildren = [];
              this.roleData.forEach((item, index, arr) => {
                if (item.file_type_fid === 0) {
                  this.a.push(item);
                }
              });
              console.log(this.a);
              this.a.forEach((item1, index1, arr1) => {
                let c = [];
                this.roleData.forEach((item2, index2, arr2) => {
                  if (item2.file_type_fid === item1.file_type_id) {
                    c.push(item2);
                  }
                });
                item1.children = c;
              });
            });
          });
        }
        // this.conform = this.ruleForm;
        console.log("添加成功", this.ruleForm);
      });
    },

    //========================工程资料添加选项 确定按钮===========================
    confirm(formName) {
      let a = [];
      this.dialogVisible = false;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //输入框发送后台
          console.log("这是", this.form);

          http.newconstruction(this.form).then((r) => {
            console.log("这是新建的", r);
            //提交后提示
            alert(r.msg);
            //重新加载数据
            this.roleData = [];
            this.a = [];
            http.project(this.ruleForm).then((r) => {
              console.log(r.data);
              this.roleData = r.data;
              this.roleData.forEach((item, index, arr) => {
                if (item.file_type_fid === 0) {
                  this.a.push(item);
                }
              });
              console.log(this.a);
              this.a.forEach((item1, index1, arr1) => {
                let c = [];
                this.roleData.forEach((item2, index2, arr2) => {
                  if (item2.file_type_fid === item1.file_type_id) {
                    c.push(item2);
                  }
                });
                item1.children = c;
              });
            });
          });
        }
        // this.conform = this.form; //添加赋值给编辑
        console.log("这是", this.form);
      });
    },
    // ============工程资料弹框编辑=====================================
    Editbutton(data) {
      this.conform = this.arr;
      this.outerVisible = false;
      console.log("编辑", data);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          http.compile(this.conform).then((r) => {});
        }
      });
    },
    // =============弹框删除按钮======================================
    del() {
      http.delete(this.str).then((r) => {
        alert(r.msg);
        this.roleData = [];
        this.a = [];
        http.project(this.ruleForm).then((r) => {
          console.log(r.data);
          this.roleData = r.data;
          //遍历循环总数居
          this.roleData.forEach((item, index, arr) => {
            //如果总数据元素的file_type_fid属于外层加在新数组a里
            if (item.file_type_fid === 0) {
              this.a.push(item);
            }
          });
          console.log(this.a);
          //内层 遍历外层对象和总数居做判断
          this.a.forEach((item1, index1, arr1) => {
            let c = [];
            this.roleData.forEach((item2, index2, arr2) => {
              //如果总数居里内层的id等于a
              if (item2.file_type_fid === item1.file_type_id) {
                c.push(item2);
              }
            });
            item1.children = c;
          });
        });

        console.log();
      });
    },
    // ========================表格===========================
    //====搜索输入===
    search(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          http.system(this.ruleForm).then((r) => {
            console.log("返回的数据", r);
            this.tableData = r.data;
            this.setCurrList(1);
            console.log(this.ruleForm);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 表格序号
    indexFn(index) {
      index = index + 1 + (this.currPage - 1) * this.pageSize;
      return index;
    },
    //重置按钮
    resetForm(formName) {
      this[formName] = {};
      this.$refs[formName].resetFields();
    },
  },
  

  //===========================获取数据====================================
  mounted() {
    let arr = [];
    // 树状图结构外层显示
    http.project(this.ruleForm).then((r) => {
      console.log(r.data);
      this.roleData = r.data;
      //遍历循环总数居
      this.roleData.forEach((item, index, arr) => {
        //如果总数据元素的file_type_fid属于外层加在新数组a里
        if (item.file_type_fid === 0) {
          this.a.push(item);
        }
      });
      console.log(this.a);
      //内层 遍历外层对象和总数居做判断
      this.a.forEach((item1, index1, arr1) => {
        let c = [];
        this.roleData.forEach((item2, index2, arr2) => {
          //如果总数居里内层的id等于a
          if (item2.file_type_fid === item1.file_type_id) {
            c.push(item2);
          }
        });
        item1.children = c;
      });
    });
  },
};
</script>
<style scoped>
.y-big-conter {
  width: 100%;
  height: 657px;
  position: relative;
  background: #eee;
}
.y-conter {
  margin-top: 10px;
  /* width: 200px; */
  width: 20%;
  height: 480px;
  /* overflow:hidden; 
 zoom:1;  */
  /* margin:5px auto; */
  /* min-height: 400px;
  
  /* overflow-y:scroll; */
  overflow: auto;
  overflow: hidden;
  background: #fff;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
/*树形控件容器  */
.cebian {
  height: 432px;
  width: 200px;
  /* 第一种 */
  /* height:auto!important;
  min-height:200px; */
  overflow: auto;
  /* background: sienna; */
  /* 第二种 */
  /* max-height:100%;
   overflow:auto */
}
/* 标题文字设置 */
.y-title {
  padding-left: 10px;
  font-size: 18px;
  font-weight: bold;
}
/* .y-inp {
  height: 30px;
} */
/* 对话框输入框 */
.el-input >>> .el-input__inner {
  width: 230px;
  height: 30px;
  margin-left: 5px;
}
/* 左侧的上部导航 */
.y-tb {
  float: right;
  padding-right: 10px;
  font-size: 18px;
  font-weight: bold;
}
/* nav头部 */
.y-nav {
  width: 200px;
  height: 50px;
  padding-top: 15px;
  /* background: salmon; */
}
/* 公共输入框样式更改 */
.el-input {
  width: 230px;
  height: 30px;
}
.el-input__inner {
  height: 30px;
  width: 230px;
}
/* 输入框 */
.sort {
  width: 230px;
  height: 30px;
}
/* 对话框 */
/* 输入框左侧边 */
.y-left-inp {
  margin-left: 60px;
}
/* 输入框右侧边*/
.y-right-inp {
  margin-left: 60px;
}
/* 右侧表格 */
.y-table {
  width: 79%;
  height: 480px;
  margin-left: 10px;
  background:#fff;
  position: absolute;
  right: 0px;
  margin-left: 10px;
  top: 0px;
}
/* 按钮 */
.el-button {
  height: 30px;
  line-height: 0px;
}
.y-form {
  width: 90%;
  height: 50px;
  margin-top: 15px;
  margin-left: 15px;
  /* background: cadetblue; */
}
.y-table-style {
  width: 99%;
  margin-top: 15px;
  margin-left: 15px;
}
</style>